<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入名称" :clearable="true" />
      </el-form-item>
      <el-form-item label="权属登记情况" prop="ownershipRegister">
        <el-input
          v-model="queryParams.ownershipRegister"
          placeholder="请输入权属登记情况"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="detailAddress">
        <el-input
          v-model="queryParams.detailAddress"
          placeholder="请输入详细地址"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleClickSearch" v-hasPermi="['officeArea:area:create']">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['officeArea:area:create']" @click="handleClickCreate">
          <Icon icon="ep:plus" />
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="offceArea"
      height-per="90"
      @page-change="getPage"
      @row-dblclick="handleTableDblclick"
    >
      <template #menu="{ row }">
        <context-menu-item
          label="修改"
          @click="handleMenuUpdate(row)"
          v-hasPermi="['officeArea:area:update']"
        />
        <context-menu-item
          label="查看办公楼"
          @click="handleMenuBuilding(row)"
          v-hasPermi="['officeArea:area:building']"
        />
        <context-menu-item
          label="查看不动产权证"
          @click="handleMenuRealEstate(row)"
          v-hasPermi="['officeArea:area:realEstate']"
        />
        <context-menu-item
          label="查看房屋所有权证"
          @click="handleMenuHousingOwnership(row)"
          v-hasPermi="['officeArea:area:housingOwnership']"
        />
        <context-menu-item
          label="查看土地所有权证"
          @click="handleMenuLandOwnership(row)"
          v-hasPermi="['officeArea:area:landOwnership']"
        />
      </template>
    </Table>
  </ContentWrap>
  <OfficeAreaEdit ref="editFormRef" @success="getPage" />
</template>
<script setup name="OfficeArea" lang="ts">
import * as officeAreaApi from '@/api/area/officeArea'
import OfficeAreaEdit from './OfficeAreaEdit.vue'
import { cloneDeep } from 'lodash-es'
const { push } = useRouter()
const editFormRef = ref()
const queryFormRef = ref()
const queryParams = ref({
  name: undefined,
  ownershipRegister: undefined,
  detailAddress: undefined
})
const queryData = ref()
const columns = [
  {
    label: '名称',
    prop: 'name'
  },
  {
    label: '分类',
    prop: 'areaClass.name'
  },
  {
    label: '权属登记情况',
    prop: 'ownershipRegister'
  },
  {
    label: '行政区划',
    prop: 'administrativeDivision'
  },
  {
    label: '详细地址',
    prop: 'detailAddress'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  },
  {
    label: '更新时间',
    prop: 'updateTime'
  }
]
/** 初始化 */
onMounted(async () => {
  getPage()
})

onActivated(() => {
  if (history.state.name != undefined) {
    queryParams.value.name = cloneDeep(history.state.name)
    delete history.state.name
  }
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 新增按钮操作 */
const handleClickCreate = () => {
  editFormRef.value.open('create', 0)
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await officeAreaApi.pageQuery(queryParams.value)
}

/** 处理右击事件 修改 */
const handleMenuUpdate = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理右击事件 查看办公楼 */
const handleMenuBuilding = (row) => {
  push({ path: '/office/officeBuilding', state: { areaId: row.id } })
}

/** 处理右击事件 查看不动产权证 */
const handleMenuRealEstate = (row) => {
  push({ path: '/files/realEstate', state: { areaName: row.name } })
}

/** 处理右击事件 查看房屋所有权证 */
const handleMenuHousingOwnership = (row) => {
  push({ path: '/files/housingOwnership', state: { areaName: row.name } })
}

/** 处理右击事件 查看土地所有权证 */
const handleMenuLandOwnership = (row) => {
  push({ path: '/files/landOwnership', state: { areaName: row.name } })
}

/** 处理table行双击事件 */
const handleTableDblclick = (row) => {
  editFormRef.value.open('update', row.id)
}
</script>
